Intro

Components

• Dropdown

  The dropdown component has two slots. The default slot is for the trigger button and the other is for the dropdown content.
  They do not require special settings or actions.
  The dropdown content can be left, center, or right aligned
  Dropdown closes when when trigger button is clicked or when mouse leaves the dropdown content
  
  *If beneficial, this component might be updated once the Popover API is fully supported by all browsers*

  Left Aligned

  • Item 1
  • Item 2
  • Item 3

  Right Aligned

  • Item 1
  • Item 2
  • Item 3

  Attributes

  align

  Accepts: left or right

• Drag and drop list

  The drag-and-drop component takes a list of items [array] and has an update event that returns the updated list when any changes are made to it.
  It can add, edit, rearrange, and delete items to an array.
  The drag-and-drop functionality includes support for mobile

  List

  Attributes

  title	Sets the list's title
  list-items	Accepts an array

  Events

  setUpdatedList

  Returns the updated list [array] when a user adds, moves, edits, or deletes any list item

• Inline value edit

  The inline value edit component is a handy little component that takes a value and a value type (ex. date, number, email, etc. Default is text) and returns an updated value if a user edits the content.
  
  The edit input has autofocus and accepts Enter/Escape presses to set or cancel content edit.
  
  Example usage is also in the drag-and-drop component above.

  Attributes

  value	The item's initial value
  value-type	This sets the input type of the value. Accepts 'text', 'number', 'date', 'email', 'tel', etc. Default is 'text'
  show-delete	Accepts: Bool True/False Default is False

  Events

  setEditedInput	Returns the updated value item
  deleteClicked	Fires when the delete (trash) icon is clicked

• Tabs

  The tabs component is preconfigured to accept an array with the following object structure:
  
  [
  {
  "tabName": "tab1",
  "tabContent": "tab content 1"
  },
  {
  "tabName": "tab2",
  "tabContent": "tab content 2"
  }
  ]
  
  This might be updated with a different approach based on user feedback.
  The tab content block accepts HTML content.
  The selected tab's accent border color is set with the 'accent-variable-name' attribute. Refer to the theme info for more details

  tab1

  tab2

  Attributes

  items

  Accepts an array

• Accordion

  The accordion component works in 2 parts—the group component and the item component.
  
  Use the group component to create a group of accordions made up of accordion items.
  Nesting a new accordion group inside an accordion item will create a sub-group of accordions.
  
  Accordion items have two slots—one for the header which defaults to a regular text element and another default slot for the accordion content.

  Accordion Item

  Attributes

  header	Sets the header text. Alternatively, set a custom header via the 'header' slot.
  default-expanded	Sets whether an accordion should be open by default. Default is False
  shape	This sets the accordion's shape Accepts: 'square', 'rounded', or 'pill' Default is square

• Icons

  Some commonly used icons to get started.
  All icons are SVGs and have size, stroke, and color settings.
  
  Some icons have additional settings.
  - Some examples are orientation for arrows/chevron.
  - The notification bell's "has-notification" accepts Bool true/false which changes the icon. Default notification color is toddle's "Red-700".
  - The mobile menu has 3 style options (enter 1, 2, or 3)

  Attributes

  size	Default size is 1rem
  stroke-width	Default stroke 1.5
  color	Default is the parent div's font color setting.

• Tooltip

  The tooltip component has one slot for the tooltip content.
  This demo uses a simple <span> element.
  The tooltip content can be left, center, or right aligned and it can be set to be above or below the trigger button.

  Attributes

  align-items	Accepts: 'left' (or 'start'), 'center', 'right' (or 'end') Default is left/start aligned
  above-below	This sets the position of the tooltip. Accepts: 'above' or 'below' Default is above
  size	This sets the size of the tooltip icon. Default is 1rem

• Buttons

  The button has slots for left/right icons if needed as well as settings for disabled and autofocus attributes.

  Square ButtonRounded ButtonPill Button

  Square ButtonRounded ButtonPill Button

  Squared ButtonRounded ButtonPill Button

  Attributes

  text	Sets the button's text
  full-width	This sets the cancel/submit icons inline with the input field. Accepts: Bool True/False Default is False
  outline	This sets the button's style to outline only. Accepts: Bool True/False Default is False
  shape	This sets the button's shape Accepts: 'square', 'rounded', or 'pill' Default is square
  disabled	Use this to disable the button. Accepts: Bool True/False Default is False
  autofocus	This sets browser focus on the button, on load of the button. Accepts: Bool True/False Default is False
  type	This sets the button's HTML 'type' attribute. Recommended to set to 'submit' when using within a form Accepts: 'button', 'submit', or 'reset' Default is button

  Events

  buttonClicked

  Fires when the button is clicked